<template>
  <div class="recommend clearfix">
    <h3 class="title">相关推荐</h3>
    <div class="lists clearfix">
      <img src="../../../static/index/ym.jpg" alt="">
      <div class="other ">
        <h3>你的孤独,只有我能体会</h3>
        <p class="author">刘同</p>
        <p class="price">
          <span class="fuhao">￥</span><span class="value">15</span>
          <span class="old">二手价</span>
        </p>
      </div>
    </div>
    <div class="lists clearfix">
      <img src="../../../static/index/ym.jpg" alt="">
      <div class="other ">
        <h3>你的孤独,只有我能体会</h3>
        <p class="author">刘同</p>
        <p class="price">
          <span class="fuhao">￥</span><span class="value">15</span>
          <span class="old">二手价</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
.recommend {
  width: 100%;
  background: #fff;
  margin-top: 20rpx;
  padding: 30rpx 18rpx;
  box-sizing: border-box;
  h3.title {
    font-size: 36rpx;
    color: #2b2b2b;
    font-weight: 700;
    padding-left: 10rpx;
    border-left: 2px solid #c78550;

    margin-bottom: 30rpx;
  }
  .lists {
    width: 50%;
    &:nth-child(2n + 1) {
      float: left;
    }
    &:nth-child(2n) {
      float: right;
    }
    img {
      width: 110rpx;
      height: 150rpx;
      float: left;
      margin-right: 20rpx;
    }
    .other {
      float: left;
      h3 {
        font-size: 28rpx;
        color: #2b2b2b;
        width: 160rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .author {
        font-size: 26rpx;
        color: #666;
        margin-top: 20rpx;
        margin-bottom: 10rpx;
      }
      .price {
        .fuhao {
          font-size: 24rpx;
          color: #c75050;
        }
        .value {
          font-size: 32rpx;
          color: #c75050;
        }
        .old {
          display: inline-block;
          width: 90rpx;
          height: 30rpx;
          background: #c78550;
          font-size: 24rpx;
          color: #fff;
          text-align: center;
          border-radius: 3px;
          margin-left: 20rpx;
        }
      }
    }
  }
}
.clearfix:after {
  display: block;
  clear: both;
  content: '';
  visibility: hidden;
  height: 0;
}
.clearfix {
  zoom: 1;
}
</style>
